import React from 'react';
import { Row, Col, Card, Statistic } from 'antd';
import ChartCore from 'node_modules/react-echarts-core';

const EchatComponent = React.memo(({ jsonData }: { jsonData: any }) => {
  const zheDates = jsonData.chart.map((e: any) => e.date);
  const zheValues = jsonData.chart.map((e: any) => e.count);

  return (
    <>
      <Row justify="center" align="middle" className='mt-1'>
        <Col span={5}>
          <Card bordered={true} style={{ textAlign: 'center' }}>
            <Statistic
              title={<span style={{ color: '#000' }}>资产</span>}
              value={jsonData.assetCount}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={5} offset={1}>
          <Card bordered={true} style={{ textAlign: 'center' }}>
            <Statistic
              title={<span style={{ color: '#000' }}>端口</span>}
              value={jsonData.portCount}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={5} offset={1}>
          <Card bordered={true} style={{ textAlign: 'center' }}>
            <Statistic
              title={<span style={{ color: '#000' }}>服务</span>}
              value={jsonData.serviceCount}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col span={5} offset={1}>
          <Card bordered={true} style={{ textAlign: 'center' }}>
            <Statistic
              title={<span style={{ color: '#000' }}>漏洞</span>}
              value={jsonData.mediumAndHighVulCount ?? 0}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>
      <Row style={{ width: '600px' }}>
        <Col span={7}>
          <ChartCore className='mt-5' option={{
            title: { text: '漏洞', left: 'center', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'item' },
            series: [{ top: '20px', left: 'left', type: 'pie', radius: ['40%', '70%'], data: jsonData.vul, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }]
          }} style={{ height: '150px' }}></ChartCore>
        </Col>
        <Col span={7} offset={1}>
          <ChartCore className='mt-5' option={{
            title: { text: '高危端口', left: 'center', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'item' },
            series: [{ top: '20px', type: 'pie', radius: ['40%', '70%'], data: jsonData.highPort, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }]
          }} style={{ height: '150px' }}></ChartCore>
        </Col>
        <Col span={7}>
          <ChartCore className='mt-5' option={{
            title: { text: '服务', left: 'center', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'item' },
            series: [{ top: '20px', left: 'left', type: 'pie', radius: ['40%', '70%'], data: jsonData.service, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }]
          }} style={{ height: '150px' }}></ChartCore>
        </Col>
      </Row>
      <Row style={{ width: '600px' }} className='pb-5'>
        <Col span={7}>
          <ChartCore className='mt-5' option={{
            title: { text: '安全态势', left: 'center', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'item' },
            series: [{ top: '20px', type: 'pie', radius: ['40%', '70%'], data: jsonData.situation, emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } }]
          }} style={{ height: '200px' }}></ChartCore>
        </Col>
        <Col span={16}>
          <ChartCore className='mt-5' option={{
            title: { text: '总体事件趋势图', left: 'center', textStyle: { fontSize: 15 } },
            tooltip: { trigger: 'item' },
            xAxis: { type: 'category', data: zheDates },
            yAxis: { type: 'value' },
            series: [{ data: zheValues, type: 'line', smooth: true }]
          }} style={{ height: '200px' }}></ChartCore>
        </Col>
      </Row>
    </>
  );
});

export default EchatComponent;
